<div class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
  <div class="py-6 px-4 md:px-6 xl:px-7.5">
    <h4 class="text-xl font-bold text-black dark:text-white">
      Top Products
    </h4>
  </div>

  <div
    class="grid grid-cols-6 border-t border-stroke py-4.5 px-4 dark:border-strokedark sm:grid-cols-8 md:px-6 2xl:px-7.5">
    <div class="col-span-3 flex items-center">
      <p class="font-medium">Product Name</p>
    </div>
    <div class="col-span-2 hidden items-center sm:flex">
      <p class="font-medium">Category</p>
    </div>
    <div class="col-span-1 flex items-center">
      <p class="font-medium">Price</p>
    </div>
    <div class="col-span-1 flex items-center">
      <p class="font-medium">Sold</p>
    </div>
    <div class="col-span-1 flex items-center">
      <p class="font-medium">Profit</p>
    </div>
  </div>

  <div
    class="grid grid-cols-6 border-t border-stroke py-4.5 px-4 dark:border-strokedark sm:grid-cols-8 md:px-6 2xl:px-7.5">
    <div class="col-span-3 flex items-center">
      <div class="flex flex-col gap-4 sm:flex-row sm:items-center">
        <div class="h-12.5 w-15 rounded-md">
          <img src="./images/product/product-01.png" alt="Product" />
        </div>
        <p class="font-medium text-sm text-black dark:text-white">Apple Watch Series 7</p>
      </div>
    </div>
    <div class="col-span-2 hidden items-center sm:flex">
      <p class="font-medium text-sm text-black dark:text-white">Electronics</p>
    </div>
    <div class="col-span-1 flex items-center">
      <p class="font-medium text-sm text-black dark:text-white">$269</p>
    </div>
    <div class="col-span-1 flex items-center">
      <p class="font-medium text-sm text-black dark:text-white">22</p>
    </div>
    <div class="col-span-1 flex items-center">
      <p class="font-medium text-sm text-meta-3">$45</p>
    </div>
  </div>
  <div
    class="grid grid-cols-6 border-t border-stroke py-4.5 px-4 dark:border-strokedark sm:grid-cols-8 md:px-6 2xl:px-7.5">
    <div class="col-span-3 flex items-center">
      <div class="flex flex-col gap-4 sm:flex-row sm:items-center">
        <div class="h-12.5 w-15 rounded-md">
          <img src="./images/product/product-02.png" alt="Product" />
        </div>
        <p class="font-medium text-sm text-black dark:text-white">Macbook Pro M1</p>
      </div>
    </div>
    <div class="col-span-2 hidden items-center sm:flex">
      <p class="font-medium text-sm text-black dark:text-white">Electronics</p>
    </div>
    <div class="col-span-1 flex items-center">
      <p class="font-medium text-sm text-black dark:text-white">$546</p>
    </div>
    <div class="col-span-1 flex items-center">
      <p class="font-medium text-sm text-black dark:text-white">34</p>
    </div>
    <div class="col-span-1 flex items-center">
      <p class="font-medium text-sm text-meta-3">$125</p>
    </div>
  </div>
  <div
    class="grid grid-cols-6 border-t border-stroke py-4.5 px-4 dark:border-strokedark sm:grid-cols-8 md:px-6 2xl:px-7.5">
    <div class="col-span-3 flex items-center">
      <div class="flex flex-col gap-4 sm:flex-row sm:items-center">
        <div class="h-12.5 w-15 rounded-md">
          <img src="./images/product/product-03.png" alt="Product" />
        </div>
        <p class="font-medium text-sm text-black dark:text-white">Dell Inspiron 15</p>
      </div>
    </div>
    <div class="col-span-2 hidden items-center sm:flex">
      <p class="font-medium text-sm text-black dark:text-white">Electronics</p>
    </div>
    <div class="col-span-1 flex items-center">
      <p class="font-medium text-sm text-black dark:text-white">$443</p>
    </div>
    <div class="col-span-1 flex items-center">
      <p class="font-medium text-sm text-black dark:text-white">64</p>
    </div>
    <div class="col-span-1 flex items-center">
      <p class="font-medium text-sm text-meta-3">$247</p>
    </div>
  </div>
  <div
    class="grid grid-cols-6 border-t border-stroke py-4.5 px-4 dark:border-strokedark sm:grid-cols-8 md:px-6 2xl:px-7.5">
    <div class="col-span-3 flex items-center">
      <div class="flex flex-col gap-4 sm:flex-row sm:items-center">
        <div class="h-12.5 w-15 rounded-md">
          <img src="./images/product/product-04.png" alt="Product" />
        </div>
        <p class="font-medium text-sm text-black dark:text-white">HP Probook 450</p>
      </div>
    </div>
    <div class="col-span-2 hidden items-center sm:flex">
      <p class="font-medium text-sm text-black dark:text-white">Electronics</p>
    </div>
    <div class="col-span-1 flex items-center">
      <p class="font-medium text-sm text-black dark:text-white">$499</p>
    </div>
    <div class="col-span-1 flex items-center">
      <p class="font-medium text-sm text-black dark:text-white">72</p>
    </div>
    <div class="col-span-1 flex items-center">
      <p class="font-medium text-sm text-meta-3">$103</p>
    </div>
  </div>
</div>